<template>
  <div class="mb20">
    <el-date-picker
      v-model="time"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="YYYY-MM-DD"
      :clearable="false"
    />
    <el-button
      type="primary"
      class="ml20"
      @click="handleSearch"
    >
      查询
    </el-button>
    <el-button @click="handleReset">
      重置
    </el-button>
  </div>

  <el-row>
    <el-col :span="24">
      <div
        ref="trendchart"
        class="chart"
      />
    </el-col>
  </el-row>

  <div class="pie-charts-container mt10">
    <div
      id="chart1"
      ref="pieChart1"
      class="pie-chart-item"
    />
    <div
      id="chart2"
      ref="pieChart2"
      class="pie-chart-item"
    />
    <div
      id="chart3"
      ref="pieChart3"
      class="pie-chart-item"
    />
    <div
      id="chart4"
      ref="pieChart4"
      class="pie-chart-item"
    />
  </div>
</template>

<script setup>
import TableCharts from './components/TableCharts.vue'
import PieCharts from './components/PieCharts.vue'
import { inject, onMounted, provide, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { getPieChartData } from '@/apis/netflow.js'
import * as echarts from 'echarts'

const time = ref([])
const timeRange = ref([])
const handleSearch = () => {
  if (time.value.length === 0) {
    ElMessage({
      message: '请选择时间范围',
      type: 'error',
      duration: 1000
    })
    return
  }
  timeRange.value = time.value
}

const handleReset = () => {
  time.value = []
  timeRange.value = []
}

provide('timeRange', { timeRange })

const route = useRoute()

const trendchart = ref(null)
const pieChart1 = ref()
const pieChart2 = ref()
const pieChart3 = ref()
const pieChart4 = ref()

let myTrendchart = null

const chartList = []
const createOption = (title, data) => {
  return {
    title: {
      text: title,
      textStyle: {
        fontSize: 16
      },
      left: 'center',
      top: 10
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '流量',
        type: 'pie',
        radius: '50%',
        data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
}

const init = () => {
  const params = {
    ...route.query,
    limit: 999,
    page: 1
  }
  if (timeRange.value.length === 2) {
    params.startDate = timeRange.value[0]
    params.endDate = timeRange.value[1]
  }
  getPieChartData(params).then((result) => {
    // 折线图
    const xData = []
    const serData = []
    for (let i = 0; i < result.date.length; i++) {
      xData.push(result.date[i].key)
      serData.push(result.date[i].value)
    }
    if (!myTrendchart) {
      myTrendchart = echarts.init(trendchart.value)
    }
    myTrendchart.setOption({
      title: { text: name },
      xAxis: { type: 'category', data: xData },
      yAxis: { type: 'value' },
      series: [{ data: serData, type: 'line' }]
    })
    window.onresize = function () {
      myTrendchart.resize()
    }

    // 饼图
    const titleList = [
      {
        title: '网站名称分布',
        key: 'site'
      },
      {
        title: '操作系统',
        key: 'os'
      },
      {
        title: '浏览器',
        key: 'browser'
      },
      {
        title: '采集省份排名',
        key: 'province'
      }
    ]
    titleList.forEach((val, index) => {
      let data = []
      if (result?.[val.key]) {
        data = result[val.key].map(item => {
          return {
            value: item.value,
            name: item.key
          }
        })
      }
      if (chartList[index]) {
        chartList[index].setOption(createOption(val.title, data))
        return
      }
      const ele = document.getElementById(`chart${index + 1}`)
      const _chart = echarts.init(ele)
      _chart.setOption(createOption(val.title, data))
      chartList.push(_chart)
    })
  }).catch(() => {
  })
}

watch(timeRange, () => {
  init()
})
onMounted(() => {
  init()
})

</script>

<style lang="scss" scoped>
.panel-group {
  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

.chart {
  min-height: 300px;
  background-color: #fff;
}

.pie-charts-container {
  display: flex;
  .pie-chart-item {
    background-color: #fff;
    flex: 1;
    height: 100%;
    height: 300px;
    &:not(:last-child) {
      margin-right: 10px;
    }
  }
}

</style>
